<template>
    <div class="Home">
        <div class="showData" v-if="analysis">
            <div class="showDataCard showData_1">
                <span class="icon icon1"><el-icon><Aim /></el-icon></span>
                <span class="text">
                    <i>访问量</i>
                    <b>{{ analysis.visits }}</b>
                </span>
            </div>
            <div class="showDataCard showData_2">
                <span class="icon icon2"><el-icon><PieChart /></el-icon></span>
                <span class="text">
                    <i>申请次数</i>
                    <b>{{ analysis.signedRequest }}</b>
                </span>
            </div>
            <div class="showDataCard showData_3">
                <span class="icon icon3"><el-icon><Compass /></el-icon></span>
                <span class="text">
                    <i>成功寄养</i>
                    <b>{{ analysis.signedSuccessfully }}</b>
                </span>
            </div>
            <div class="showDataCard showData_4">
                <span class="icon icon4"><el-icon><Tickets /></el-icon></span>
                <span class="text">
                    <i>文章发布</i>
                    <b>{{ analysis.publication }}</b>
                </span>
            </div>
        </div>
        <div class="showData_tool">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>公告</span>
                    </div>
                </template>
                <div class="NoticeHet">
                    <el-scrollbar height="240px">
                        <el-timeline>
                            <el-timeline-item 
                                v-for="(item) in NoticeHot"
                                :key="item.id"
                                :timestamp="item.createTime"
                                placement="top">
                                <el-card @click="noticeDetail(item)">
                                    <h3>{{ item.title }}</h3>
                                    <p class="HomePageContent" style="width: 100%;">{{ item.content }}</p>
                                </el-card>
                            </el-timeline-item>
                        </el-timeline>
                    </el-scrollbar>
                </div>
            </el-card>
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>小笔头</span>
                    </div>
                </template>
                <div class="NoticeHet">
                    <el-scrollbar height="240px">
                        <el-timeline>
                            <el-timeline-item 
                                v-for="(item) in NoteHet"
                                :key="item.id"
                                :timestamp="item.createTime"
                                placement="top">
                                <el-card>
                                    <h4>{{ item.name }}</h4>
                                    <p class="HomePageContent">{{ item.content }}</p>
                                </el-card>
                            </el-timeline-item>
                        </el-timeline>
                    </el-scrollbar>
                </div>
            </el-card>
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>公告</span>
                    </div>
                </template>
                <div class="NoticeHet" id="NoticeHetld">
                    <!-- <el-scrollbar height="240px">
                        <el-timeline>
                            <el-timeline-item 
                                v-for="(item) in NoticeHot"
                                :key="item.id"
                                :timestamp="item.createTime"
                                placement="top">
                                <el-card @click="noticeDetail(item)">
                                    <h3>{{ item.title }}</h3>
                                    <p class="HomePageContent" style="width: 100%;">{{ item.content }}</p>
                                </el-card>
                            </el-timeline-item>
                        </el-timeline>
                    </el-scrollbar> -->
                </div>
            </el-card>
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>优惠券</span>
                    </div>
                </template>
                <div class="NoticeHet">
                    <el-scrollbar max-height="240px">
                        <el-timeline>
                            <el-timeline-item
                                v-for="(item) in CouponsList"
                                :key="item.id"
                                :timestamp="item.startTime"
                                placement="top">
                                <el-card @click="ReceiveCoupons(item)">
                                    <div style="display: flex;width: 93%;justify-content: center;">
                                        <h3 style="width: 26%;">{{ item.name }}</h3>
                                        <div class="" style="width: 28%;margin-left: 8px;">
                                            <p>金额：<span style="font-size: 14px; color: rgb(202 94 42);">{{ item.amount }}￥</span></p>
                                            <p>剩余<span style="color: red;">{{ item.count }}</span>张</p>
                                        </div>
                                        <div style="width: 16%;font-size: 10px;">
                                            <span v-if="item.useType == 0">全场通用</span>
                                            <span v-else-if="item.useType == 1">指定商品</span>
                                        </div>
                                        <p class="HomePageContent" style="width: 40%;">
                                            <el-tooltip
                                                class="box-item"
                                                effect="dark"
                                                :content="item.note"
                                                placement="top-start"
                                            >{{ item.note }} </el-tooltip>        
                                        </p>
                                    </div>
                                </el-card>
                            </el-timeline-item>
                        </el-timeline>
                    </el-scrollbar>
                </div>
            </el-card>
            <el-card class="box-card NoticeMap">
                <template #header>
                    <div class="card-header">
                        <span>用户分布</span>
                    </div>
                </template>
                <div class="NoticeMapContain">
                    <div ref="charts" style="width: 100%; height: 500px"></div>
                </div>
            </el-card>
        </div>
        <el-dialog
            v-model="dialogVisible"
            :title="noticeMsg.title"
            width="30%"
            height="300px">
            <div class="notice_content" style="font-size: 16px;color: #1a0a0a;text-indent: 1em;">
                {{ noticeMsg.content }}
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { getCurrentInstance} from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex' 
import { ElMessage  } from 'element-plus'
import * as echarts from "echarts";
import zg from '@/util/city.json'
export default defineComponent({
    data(){
        return {
            NoteHet:[],
            NoticeHot:[],
            CouponsList:[],
            dialogVisible:false,
            user:null,
            noticeMsg:{
                title:'',
                content:''
            },
            analysis:null
        }
    },
    setup() {
        // 路由
        const route = useRouter();
        // vuex的数据对象
        const store = useStore();
        const { proxy } = getCurrentInstance();
        return{
            proxy,
            route,
            store
        } 
    },
    created () {
        this.user = this.store.state.UserMessage;
        this.LoadData()
        this.loadCoupons()
    },
    methods:{
        LoadData(){
            let self = this;
            self.$http.get(`${self.baseUrl}/note/hot`).then(res=>{
                self.NoteHet = res.data;
            })
            self.$http.get(`${self.baseUrl}/analysis/searchAnalysis`).then(res=>{
                self.analysis = res.data[0];
            })
            let row = this.pageData();
            row.name = null;
            self.$http.post(`${self.baseUrl}/introduction/selectName`,row).then(res=>{
                self.NoticeHot = res.data.document;
            })
            self.$http.get(`${self.baseUrl}/user/randUserAddr`).then(res=>{
                self.dealData(res.data);
            })
        },
        loadCoupons(){
            let self = this;
            self.$http.post(`${self.baseUrl}/coupons/descQueryCoupons`).then(res=>{
                self.CouponsList = res.data;
            })
        },
        dealData(data){
            let row = [];
            data.forEach(element => {
                if(!element || !element.address) return false;
                row.push({
                    name:element.address,
                    value:JSON.parse(element.lal)
                })
            })
            this.initDrawMap(row);
        },
        ReceiveCoupons(msg){
            let self = this;
            let row = {
                uid:self.user.Id,
                cid:msg.id
            };
            self.$http.post(`${self.baseUrl}/coupons/subCouponsCount`,row).then(res=>{
                if(res.data > 0){
                    ElMessage({
                        message:"领取成功",
                        type:'success'
                    })
                    self.loadCoupons();
                }else{
                    ElMessage({
                        message:"已领完或已领取",
                        type:'warning'
                    })
                }
            })
        },
        noticeDetail(row){
            this.noticeMsg = row;
            this.dialogVisible = true;

        },
        initDrawMap(data){
            const charts = echarts.init(this.$refs["charts"]);
            const option = {
                // 背景颜色
                backgroundColor: "#7f9cb9",
                // 提示浮窗样式
                tooltip: {
                    show: true,
                    trigger: "item",
                    alwaysShowContent: false,
                    backgroundColor: "#0C121C",
                    borderColor: "rgba(255, 15, 26, 0.16);",
                    hideDelay: 0,
                    triggerOn: "mousemove",
                    enterable: true,
                    // 显示浮窗的内容
                    formatter(params) {
                        return `地区：${params.name}`;
                    },
                    textStyle: {
                        color: "#DADADA",
                        fontSize: "12",
                        width: 0,
                        height: 0,
                        overflow: "break",
                    },
                    showDelay: 0
                },
                series: [{
                    type: "effectScatter",
                    coordinateSystem: "geo",
                    effectType: "ripple",
                    showEffectOn: "render",
                    rippleEffect: {
                        period: 10,
                        scale: 10,
                        brushType: "fill",
                    },

                    hoverAnimation: true,
                    itemStyle: {
                        normal: {
                        color: "rgba(255, 235, 59, .7)",
                        shadowBlur: 10,
                        shadowColor: "#333",
                        },
                    },
                    zlevel: 1,
                    data: data,
                    }
                ],
                // 地图配置
                geo: {
                    map: "china",
                    left: "10%", top: "5%", right: "10%", bottom: "0%",
                    label: {
                        // 通常状态下的样式
                        normal: {
                        show: true,
                        textStyle: {
                            color: "#fff",
                        },
                        },
                        // 鼠标放上去的样式
                        emphasis: {
                        textStyle: {
                            color: "#fff",
                        },
                        },
                    },
                    // 地图区域的样式设置
                    itemStyle: {
                        normal: {
                        borderColor: "rgba(147, 235, 248, 1)",
                        borderWidth: 1,
                        areaColor: {
                            type: "radial",
                            x: 0.5,
                            y: 0.5,
                            r: 0.8,
                            colorStops: [
                            {
                                offset: 0,
                                color: "rgba(255,65,225,0)", // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "rgba(255,65,225,.2)", // 100% 处的颜色
                            },
                            ],
                            globalCoord: false, // 缺省为 false
                        },
                            shadowColor: "#ddd",
                            shadowOffsetX: -2,
                            shadowOffsetY: 2,
                            shadowBlur: 5,
                        },
                        // 鼠标放上去高亮的样式
                        emphasis: {
                        areaColor: "#d87caf",
                        borderWidth: 0,
                        },
                    },
                },
            };
            // 地图注册，第一个参数的名字必须和option.geo.map一致
            echarts.registerMap("china",zg)

            charts.setOption(option);
        },
        pageData(){
            let row = {
                "end":5,
                "current":1
            };
            return row;
        },
    }
})
</script>
<style scoped>
    .calendar{
        width: 56%;
        margin-top: 20px;
        float: left;
    }
    .box-card{
        width: 39%;
        float: left;
        margin: 20px 20px 5px 20px;
    }
    .showData_tool{
        width: 100%;
        overflow: hidden;
        display: flex;
        justify-content: space-around;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .HomePageContent{
        height: 20px;
        overflow: hidden; 
        text-overflow: ellipsis; 
        white-space: nowrap;
        display: inline-block;
        cursor: pointer;
    }
    .NoticeMap{
        width: 70%;
    }
    
    .NoticeMapContain{
        height: 100%;
        overflow: hidden;
    }

    h4{
        display: inline-block;
        float: left;
        background-color: #F56C6C;
        padding: 1px 3px;
        margin-right: 3px;
        color: #fff;
    }
    .HomePageContent i{
        color: #F56C6C;
        font-style: normal;
        font-size: 16px;
        margin: 0 3px;
    }
    .showData{
        display: flex;
        justify-content: center;
        margin: 20px 0;
    }
    .showDataCard{
        width: 18%;
        margin: 0 23px;
        height: 90px;
        border-radius: 16px;
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .showData_1{
        box-shadow: 0px -1px 9px 5px #d87caf;
    }
    .showData_2{
        box-shadow: 0px -1px 9px 5px #8677d4;
    }
    .showData_3{
        box-shadow: 0px -1px 9px 5px #81d77f;
    }
    .showData_4{
        box-shadow: 0px -1px 9px 5px #d8d37c;
    }
    .icon{
        display: inline-block;
        font-size: 53px;
        display: flex;
        align-items: center;
    }
    .icon1{
        color: #f1107c;
    }
    .icon2{
        color: #8019de;
    }
    .icon3{
        color: #66d178;
    }
    .icon4{
        color: #d8e153;
    }
    .text{
        line-height: 30px;
    }
    .text b{
        display: block;
        font-size: 28px;
        display: block;
        width: 84px;
        overflow: hiddden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: right;
    }
    .showData_1 b{
        color: #f1107c;
    }
    .showData_2 b{
        color: #8019de;
    }
    .showData_3 b{
        color: #66d178;
    }
    .showData_4 b{
        color: #d8e153;
    }
    .text i{
        font-size: 22px;
        font-style: normal;
        margin-left: 18px;
    }
</style>
